<script lang="ts" setup>
import { ref, unref, computed, useAttrs } from 'vue'
import type { ElDialog } from 'element-plus'
import { isNumber } from '@/utils/is'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  dialogWidth: {
    type: String,
    default: '50%'
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  maxHeight: {
    type: [String, Number],
    default: '450px'
  },
  isScrollbar: {
    type: Boolean,
    default: true
  },
  // 前置icon
  frontIcon: {
    type: String,
    default: ''
  },
  showClose: {
    type: Boolean,
    default: true
  }
})

// 事件
const emit = defineEmits(['close'])

// defaultRef
const elDialogRef = ref<ComponentRef<typeof ElDialog>>()
// 显示隐藏
const dialogVisible = ref(false)
// 是否全屏
const isFullScreen = ref(false)
// 弹窗内容高度
const dialogHeight = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
// 组件上绑定的属性
const attrs = useAttrs()
// 获取组件上绑定的属性
const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']
  // https://cn.vuejs.org/guide/components/attrs.html
  const obj = { ...attrs, ...props }
  let key: keyof typeof obj
  for (key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})
// 获取绑定的style
const dialogStyle = computed(() => {
  return { height: dialogHeight }
})

// 全屏切换
const toggleFull = () => {
  isFullScreen.value = !unref(isFullScreen)
}
// 关闭钩子
const handleClose = () => {
  emit('close')
}
defineExpose({ elDialogRef })
</script>
<template>
  <el-dialog
    ref="elDialogRef"
    v-model="dialogVisible"
    v-bind="getBindValue"
    :fullscreen="props.fullscreen"
    :width="props.dialogWidth"
    class="mhc-dialog-container"
    destroy-on-close
    :show-close="props.showClose"
    lock-scroll
    append-to-body
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <template #header>
      <div class="flex items-center">
        <span class="title">
          <slot name="title">
            {{ props.title }}
          </slot></span
        >
        <svg-icon
          v-if="props.fullscreen"
          class="cursor-pointer is-hover"
          :icon="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
          @click="toggleFull"
        />
      </div>
    </template>

    <el-scrollbar v-if="props.isScrollbar" :style="dialogStyle">
      <slot />
    </el-scrollbar>

    <div v-else :style="dialogStyle">
      <slot />
    </div>

    <template #footer>
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.front-icon {
  margin-right: 8px;
}

.title {
  padding-left: 10px;
  border-left: 4px solid $primaryColor;
}
</style>
<style lang="scss">
.mhc-dialog-container {
  padding: 0 !important;
  border-radius: 8px;

  .el-dialog__header {
    display: flex;
    padding: 18px 20px !important;
    margin-right: 0;
    font-size: 20px;
    align-items: center;
    border-radius: 8px 8px 0 0;

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;
      width: 18px;
      height: 18px;
    }

    .el-dialog__close {
      font-size: 20px;
    }

    .el-dialog__headerbtn:hover .el-dialog__close {
      color: $primaryColor;
    }
  }

  .el-dialog__body {
    padding: 30px 20px;

    .el-form {
      padding-right: 10px;
      overflow-x: hidden;
    }
  }

  .el-dialog__footer {
    padding: 16px 20px;
  }
}
</style>
